import { Component, createRef } from "react";
// 引入 quill 的核心类
import Quill from "quill";
// 引入 quill 的样式
import "quill/dist/quill.snow.css";

export default class index extends Component {
  boxRef = createRef<HTMLDivElement>();

  render() {
    return (
      <div>
        <h2>Quill 原生</h2>

        {/* 提供一个容器 */}
        <div ref={this.boxRef} style={{ width: "100%", height: 400 }}></div>
      </div>
    );
  }

  componentDidMount() {
    // 实例化 quill
    const editor = new Quill(this.boxRef.current!, {
      theme: "snow",
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ["bold", "italic", "underline", "strike", "blockquote"],
          [
            { list: "ordered" },
            { list: "bullet" },
            { indent: "-1" },
            { indent: "+1" },
          ],
          ["link", "image"],
          ["clean"],
        ],
      },
    });

    console.log("editor", editor);
  }
}
